<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>demo</title>
	<style>
    /*清除样式*/
    button{
        border-style: none;
        padding: 5px;
        margin: 10px;
        border-radius: 7px;

    }
    ul{
        list-style: none;
    }
    .clearfix:before,.clearfix:after{
        content: "";
        display: table;
    }
    .clearfix:after{
        clear: both;
    }
    .clearfix{
        *zoom: 1;/*ie/7/6*/
    }
    /*蒙版样式*/
	#test{
	      display: none;
	      position: absolute;
	      top: 0px;
	      left: 0px;
	      z-index: 214;
	      cursor: crosshair;
	      background-color: rgba(0, 0, 0, 0.298039);
	      box-sizing: content-box;
	      height: 0;
	      width: 0;
	}
    /*裁剪框样式*/
	#test1{
	      border: 2px dashed #fff;
	      position: relative;
	      cursor: move;
	      z-index: 999;
	      display: none;
          background: rgba(0,0,0,1);
          box-sizing: content-box;
	}
    #bt{
        position: absolute;
        bottom: -65px;
        right: -5px;
    }
    /*初始化剪去部分*/
    #screenTop{
        top: 0;
        left: 0;
    }
    #screenRight{
        top: 0;
        right: 0;
    }
    #screenBottom{
        right: 0;
        bottom: 0;
    }
    #screenLeft{
        bottom: 0;
        left: 0;
    }
    .same{
        position:absolute;
        background-color: rgba(0, 0, 0, 0.3);
        cursor:auto;
    }
    /*确定取消按钮样式*/
    ul li{
        float: left;
    }
    span img{
        margin-right: 5px;
        margin-top: 5px;
        height: 14px;
        width: 14px;
    }
	</style>
</head>
<body>
    <div id="test">
	
    <div id="screenTop" class="same"></div>
    <div id="screenRight" class="same"></div>
    <div id="screenLeft" class="same"></div>
    <div id="screenBottom" class="same"></div>
        <div id="test1">
        <ul id="bt" class="clearfix">
            <li><button><span><img src="./image/x.png" alt=""></span>取消</button></li>
            <li><button><span><img src="./image/y.png" alt=""></span>选择</button></li>
        </ul>
        </div>
    </div>
	<button onclick="createMask()" id="btn">获取蒙版</button>
   
	<script>
		var winHeight=0;
		var winWidth=0;

		var mask = document.getElementById('test');
		var cropArea = document.getElementById('test1');

        var Top = document.getElementById('screenTop');
        var Bot = document.getElementById('screenBottom');
        var Rig = document.getElementById('screenRight');
        var Lef = document.getElementById('screenLeft');

        // 创建4个遮盖
        function createMasks(leftTop, rightBottom) {
            var topHeight = leftTop.y;
            var topWidth = winWidth;
            Top.style.width = topWidth + 'px';
            Top.style.height = topHeight + 'px';

            var leftHeight = winHeight - leftTop.y;
            var leftWidth = leftTop.x;
            Lef.style.width = leftWidth + 'px';
            Lef.style.height = leftHeight + 'px';
            Lef.style.top = leftTop.y +'px';
            Lef.style.left = 0 + 'px';

            var bottomHeight = winHeight - rightBottom.y;
            var bottomWidth =winWidth - leftTop.x;
            Bot.style.width = bottomWidth + 'px';
            Bot.style.height = bottomHeight + 'px';
            Bot.style.bottom = 0 + 'px';
            Bot.style.left = leftTop.x + 'px';

            var rightHeight = rightBottom.y - leftTop.y;
            var rightWidth = winWidth - rightBottom.x;
            Rig.style.width = rightWidth + 'px';
            Rig.style.height = rightHeight + 'px';
            Rig.style.right = 0 + 'px';
            Rig.style.top = topHeight + 'px';

        };

		// 创建蒙版
		function createMask(){
			//获取窗口宽度
			if (window.innerWidth)
				winWidth = window.innerWidth;
			else if ((document.body) && (document.body.clientWidth))
				winWidth = document.body.clientWidth;

			//获取窗口高度
			if (window.innerHeight)
				winHeight = window.innerHeight;
			else if ((document.body) && (document.body.clientHeight))
				winHeight = document.body.clientHeight;

			//通过深入Document内部对body进行检测，获取窗口大小
			if (document.documentElement && document.documentElement.clientHeight && document.documentElement.clientWidth)
			{
			winHeight = document.documentElement.clientHeight;
			winWidth = document.documentElement.clientWidth;
			}
			mask.style.height = winHeight + "px";
			mask.style.width = winWidth + "px";
			mask.style.display = 'block';
			document.getElementById('btn').style.display = "none";
		}
        
		//选取截取位置
		var start = {
			x: 0,
			y: 0
		};

		var mousedown = false;
		mask.onmousedown = function(event){
            var x = event.pageX;
            var y = event.pageY;
            start.x = x;
            start.y = y;
            cropArea.style.left = x + 'px';
            cropArea.style.top  = y + 'px';

            cropArea.style.height = 0 + 'px';
            cropArea.style.width = 0 + 'px'; 
            cropArea.style.display = 'block';  

            // Top.style.height = y + 'px';
            // Lef.style.width = x + 'px';

            mousedown = true;
		};

		document.body.onmousemove = function(event){
            var x = event.pageX;
            var y = event.pageY;

            var diffX = x - start.x;
            var diffY = y - start.y;

            if (mousedown) {
                cropArea.style.width = diffX + 'px';
                cropArea.style.height = diffY + 'px'; 

                createMasks(start, {x: x, y:y});
            }  

		};
            
		document.body.onmouseup = function(event){

            start.x = 0;
            start.y = 0;
            mousedown = false;

            // Top.style.width = winWidth + 'px';
            // Lef.style.height = winHeight + 'px';
            // Rig.style.height = winHeight + 'px';
            // Bot.style.width = winWidth + 'px';



            // Rig.style.width = winWidth - document.cropArea.pageX + 'px';
            // Bot.style.height = winHeight - document.cropArea.pageY +'px';
            // alert("onclic");
		};

        //取消功能
        

	</script>
</body>
</html>